import React, { useState } from 'react'

export default function App() {
  const [content, setContent] = useState('')
  const [question, setQuestion] = useState('讲一下龟兔赛跑的故事,200字以内')
  const [streaming, setStreaming] = useState(false)

  const update = async () => {
    if (!question) return
    setContent('思考中...')

    const endpoint = 'https://api.deepseek.com/chat/completions'
    const headers = {
      'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`,
      'Content-Type': 'application/json'
    }
    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [{ role: 'user', content: question }],
        stream: streaming
      })
    })

    // 若启用了流式输出（streaming为true）
    if (streaming) {
      setContent('')
      const reader = response.body.getReader()  // 获取响应体的读取器（用于读取二进制流）
      const decoder = new TextDecoder()  // 创建解码器（将二进制数据转为字符串）

      let isDecodingComplete = false  // 标记是否解码完成
      let buffer = ''  // 缓冲区：存储不完整的分片数据（因流式传输可能分片到达）

      // 循环读取流数据，直到解码完成
      while (!isDecodingComplete) {
        // 读取二进制数据块：value是二进制数据，chunkDone标记当前块是否为最后一块
        const { value, done: chunkDone } = await reader.read()
        isDecodingComplete = chunkDone  // 更新解码完成标记（如果当前块为最后一块，则标记为true）
        // 将缓冲区残留数据与新解码的数据拼接（处理分片不完整的情况）
        const chunkValue = buffer + decoder.decode(value)
        buffer = ''  // 清空缓冲区，准备处理新数据
        // 按换行符分割数据，过滤出以"data:"开头的有效行（Deepseek流式响应格式）
        const lines = chunkValue.split('\n').filter(line => line.startsWith('data:'))
        // 提取非"data:"开头的内容（可能是不完整的分片），存入缓冲区
        const remaining = chunkValue.split('\n').filter(line => !line.startsWith('data:')).join('\n')
        if (remaining) {
          buffer = remaining  // 缓存不完整数据，等待下一次拼接
        }
        // 遍历每一行有效数据
        for (const line of lines) {
          const incoming = line.slice(6)  // 移除行首的"data:"（共6个字符）
          // 若遇到"[DONE]"，表示流式传输结束
          if (incoming === '[DONE]') {
            isDecodingComplete = true  // 标记解码完成
            break  // 退出循环
          }
          try {
            const data = JSON.parse(incoming)  // 将字符串解析为JSON对象
            // 提取当前分片的内容（Deepseek响应格式：choices[0].delta.content）
            const delta = data.choices[0].delta.content
            if (delta) {
              // 将新内容追加到已有内容中（使用函数式更新确保依赖最新状态）
              setContent((prev) => prev + delta)
            }
          } catch (err) {
            console.log(err)  // 解析JSON失败时打印错误
          }
        }
      }
    }
    else {
      const data = await response.json()
      setContent(data.choices[0].message.content)
    }
  }
  return (
    <div className='container'>
      <div>
        <label>输入：</label>
        <input type="text" defaultValue={question} onChange={(e) => setQuestion(e.target.value)} />
        <button onClick={update}>提交</button>
      </div>

      <div className="output" style={{ minHeight: '300px', width: '500px' }}>
        <div>
          <label>Streaming</label>
          <input type="checkbox" onChange={(e) => setStreaming(e.target.checked)} />
          <div>{content}</div>
        </div>
      </div>
    </div>
  )
}